<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 头部 -->
    <header class="dpflex1">
        <!-- 版心 -->
        <div class="container">
            <!-- 头部返回按钮 -->
            <div class="headerTop">
                < </div>
           
            <!-- 各种数据 -->
            <div class="dataBox">
                <!-- 我的数据 -->
                <div class="myData dpflex">
                    <p>我的运动数据</p>
                    <!-- 头像 -->
                    <div>
                        <img class="myhead" src="../imgs/dog.jpg" alt="">
                    </div>
                </div>
                <!-- 总运动 -->
                <div class="general mt20">
                    <!-- 总运动时间 -->
                    <div class="allSportTime">
                        <div class="allTime">
                            <p class="fr169">总运动</p>
                            <div class="sportTime">
                                <span class="concreteTime f38">9999</span>
                                分钟
                            </div>
                        </div>
                    </div>
                    <!-- 本周消耗 -->
                    <div class="consume">
                        <div class="consumeBox">
                            <p class="fr169">本周消耗</p>
                            <div class="consumeCard">
                                <span class="concreteCard f38">9999</span>
                                千卡
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 各项数据 -->
                <div class="everyNum mt20">
                    <!-- 千卡 -->
                    <div class="cardBox">
                        <p class="fr169">消耗（千卡）</p>
                        <div class="cardNum fw">999</div>
                    </div>
                    <!-- 累计 -->
                    <div class="allDay">
                        <p class="fr169">累计（天）</p>
                        <div class="allAayNum fw">999</div>
                    </div>
                    <!-- 连续 -->
                    <div class="connectDay">
                        <p class="fr169">连续（天）</p>
                        <div class="connectDayNum fw">999</div>
                    </div>
                </div>

            </div>
        </div>
    </header>
    <!-- 运动时长柱形图 -->
    <div id="sportsOne" class="chart"> </div>
    <!-- 运动分类 -->
    <div id="sportsCake" class="chart"> </div>
    <!-- 近七日运动分类 -->
    <div id="sportsSeven" class="chart"> </div>
    <!-- 近七日训练次数 -->
    <div id="sportsNum" class="chart"> </div>
</body>

</html>